<template><div>
                <div class="content__inner">
                    <header class="content__title">
                        <h1>Contacts</h1>

                        <div class="actions">
                            <a href="" class="actions__item zmdi zmdi-trending-up"></a>
                            <a href="" class="actions__item zmdi zmdi-check-all"></a>

                            <div class="dropdown actions__item">
                                <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="" class="dropdown-item">Refresh</a>
                                    <a href="" class="dropdown-item">Manage Widgets</a>
                                    <a href="" class="dropdown-item">Settings</a>
                                </div>
                            </div>
                        </div>
                    </header>

                    <div class="toolbar">
                        <nav class="toolbar__nav">
                            <a class="active" href="">Following</a>
                            <a href="groups.html">Groups</a>
                        </nav>

                        <div class="actions">
                            <i class="actions__item zmdi zmdi-search" data-ma-action="toolbar-search-open"></i>
                            <a href="" class="actions__item zmdi zmdi-info-outline hidden-xs-down"></a>

                            <div class="dropdown actions__item hidden-xs-down">
                                <i class="zmdi zmdi-more-vert" data-toggle="dropdown"></i>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="" class="dropdown-item">Refresh</a>
                                    <a href="" class="dropdown-item">Delete</a>
                                    <a href="" class="dropdown-item">Settings</a>
                                </div>
                            </div>
                        </div>

                        <div class="toolbar__search">
                            <input type="text" placeholder="Search..."/>

                            <i class="toolbar__search__close zmdi zmdi-long-arrow-left" data-ma-action="toolbar-search-close"></i>
                        </div>
                    </div>

                    <div class="contacts row">
                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/1.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Cathy Shelton</strong>
                                    <small>cathy.shelton31@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/3.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Marilyn Thomas</strong>
                                    <small>marilyn@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/4.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Dwight Gilbert</strong>
                                    <small>dwight@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/5.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Cody Moreno</strong>
                                    <small>moreno@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/6.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Jamie Freeman</strong>
                                    <small>freeman@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/7.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Charles Spencer</strong>
                                    <small>charles@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/8.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Vickie Reed</strong>
                                    <small>reed@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/9.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Lauren Ruiz</strong>
                                    <small>ruiz@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/10.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Marlene Vasquez</strong>
                                    <small>vasquez@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/11.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Loretta Morrisonz</strong>
                                    <small>morrisonz@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/12.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Yvonne Wood</strong>
                                    <small>wood@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/13.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Denise Franklin</strong>
                                    <small>franklin@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/14.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Joseph Gonzalez</strong>
                                    <small>gonzalez@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/15.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Rick Graham</strong>
                                    <small>graham@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/16.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Alexander Bailey</strong>
                                    <small>bailey@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>
                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/1.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Cathy Shelton</strong>
                                    <small>cathy.shelton31@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/2.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Stella Flores</strong>
                                    <small>stella@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/3.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Marilyn Thomas</strong>
                                    <small>marilyn@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/4.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Dwight Gilbert</strong>
                                    <small>dwight@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/5.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Cody Moreno</strong>
                                    <small>moreno@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/6.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Jamie Freeman</strong>
                                    <small>freeman@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/7.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Charles Spencer</strong>
                                    <small>charles@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/8.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Vickie Reed</strong>
                                    <small>reed@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/9.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Lauren Ruiz</strong>
                                    <small>ruiz@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/10.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Marlene Vasquez</strong>
                                    <small>vasquez@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/11.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Loretta Morrisonz</strong>
                                    <small>morrisonz@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/12.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Yvonne Wood</strong>
                                    <small>wood@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>

                        <div class="col-xl-2 col-lg-3 col-sm-4 col-6">
                            <div class="contacts__item">
                                <a href="" class="contacts__img">
                                    <img src="/static/demo/img/contacts/13.jpg" alt=""/>
                                </a>

                                <div class="contacts__info">
                                    <strong>Denise Franklin</strong>
                                    <small>franklin@example.com</small>
                                </div>

                                <button class="contacts__btn">Following</button>
                            </div>
                        </div>
                    </div>
                </div>

                
            </div></template>